{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body">
                <form method="post" novalidate id="addForm">
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative;margin-bottom: 15px">
                                    <label>{{ field.label }}</label>
                                    {{field}}
                                    <span style="color: red;position: absolute"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-xs-12">
                            <button type="button" id="btnAdd" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <h1>Ajax学习</h1>
        <h3>实例1</h3>
        <input id="btn1" type="button" class="btn btn-primary" value="点击" onclick="clickMe()">

        <h3>实例2</h3>
        <input type="text" id="txtUser" placeholder="姓名"/>
        <input type="text" id="txtAge" placeholder="年龄"/>
        <input type="button" id="btn2" value="点击" class="btn btn-primary"/>

        <h3>实例3</h3>
        <form  id="form3">
            <input type="text" name="user" placeholder="姓名"/>
            <input type="text" name="age" placeholder="年龄"/>
            <input type="text" name="email" placeholder="邮箱"/>
            <input type="text" name="more" placeholder="更多"/>
            <input type="button" id="btn3" value="点击3" class="btn btn-primary"/>
        </form>
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
      $(function (){
          // 页面框架完成之后代码自动执行
          bindBtn2Event()
          bindBtn3Event()
          bindBtnAddEvent()
      })
        function clickMe(){
            $.ajax({
                url:'/app/task/ajax/',
                type:"get",
                data:{
                    n1:123,
                    n2:456
                },
                success:function (res) {
                    console.log(res)
                }
            })
        }

        function bindBtn2Event(){
            $('#btn2').click(function (){
                $.ajax({
                url:'/app/task/ajax/',
                type:"post",
                data:{
                    user:$("#txtUser").val(),
                    age:$("#txtAge").val()
                },
                dataType:"JSON",
                success:function (res) {
                    console.log(res)
                }
            })
            })
        }
        function bindBtn3Event(){
            $('#btn3').click(function (){
                $.ajax({
                url:'/app/task/ajax/',
                type:"post",
                data:$("#form3").serialize(),
                dataType:"JSON",
                success:function (res) {
                    console.log(res)
                }
            })
            })
        }
        function bindBtnAddEvent(){
            $('#btnAdd').click(function (){
                $(".error_msg").text("")
                $.ajax({
                url:'/app/task/add/',
                type:"post",
                data:$("#addForm").serialize(),
                dataType:"JSON",
                success:function (res) {
                    console.log(res)
                    if(res.status){
                        alert("添加成功")
                    }else{
                        console.log(res.error)
                        $.each(res.error,function (name,data) {
                            console.log(name,data)
                            $("#id_"+name).next().text(data[0])

                        })
                    }
                }
            })
            })
        }

    </script>
{% endblock %}